<template>
  <!-- 创建新租表单第二步 - 编辑合同内容 -->
  <div class="container">
    <BaseEditor
        :getHtmlContent="state.ctx"
        :excludeArr="state.editorExcludeArr"
        getHight="800px"
        @getEditorVal="getEditorVal"
        ref="baseEditorRef"
    />
    <div class="button-wrapper">
      <el-button @click="goBack">返回上一级</el-button>
      <el-button @click="saveAndNext" color="#FF7B50" style="color: #fff;">保存并下一步</el-button>
    </div>
  </div>
</template>

<script setup>
import BaseEditor from "@/components/BaseEditor";
import {ref,reactive,onMounted} from "vue";
import {contractApi} from "@/api/assets";
import {contractApi as contractApi2} from "@/api/coordination";
import { useRouter } from "vue-router";
import {localGet} from "@/common/utils/GlobalUtils";

const state = reactive({
  ctx: null,
  assetId: "",
  editorExcludeArr: ["group-image", "group-video", "emotion"],
  getHtml: "",
});
const router = useRouter();
const contractId = ref('');
const baseEditorRef = ref(null);

// 从路由path中获取的
const getTemplateUrlKey = router.currentRoute.value.params.templateUrlKey;

/**
 * 替换文本
 */
const replaceText = (text,list) => {
    if(list.length===0){
        return text;
    }
    for (let item of list){
        text = text.replace(new RegExp(item.fileName,'g'), `<img src="${item.fileUrl}">`);
    }
    return text;
}

/**
 * 替换图片
 */
const replaceImg = (list) => {
  if(list.length===0){
      return;
  }
    for (let item of list){
        let spanList = document.getElementsByTagName('span');
        for (let span of spanList){
            if(span.innerText===item.fileName || span.innerHTML === '{{'+item.fileName+'}}'){
                span.innerHTML = `<img src="${item.fileUrl}"  alt=""/>`
            }
        }
    }

}

// 根据合同编号,获取需要赋值给富文本的内容
const getHtml =async (contractId) => {
  let params = {
      contractId:contractId,
      templateUrlKey :getTemplateUrlKey
  }
  const res = await  contractApi.getBindData(params)
  const res2 = await contractApi.getContractFileListDto(params);
  if(res2.code === '200'){
      state.ctx = res;
      state.getHtml = res;
      setTimeout(()=>{
          replaceImg(res2.data);
      },2000);
  }
}

const emits = defineEmits(['nextStep']);

// 返回上一级
const goBack = ()=>{
  emits('nextStep','GoPreview');
}

//保存并下一步
const contractTemplateId = router.currentRoute.value.params.contractTemplateId;
const saveAndNext = ()=>{
  contractApi2.saveContractWord({
    contractTemplateId:contractTemplateId, // 合同模板编号
    htmlContent:state.getHtml,
    contractId:contractId.value, // 合同编号
  }).then(res=>{
    if(res.code == 200){
      emits('nextStep','GoSupplementaryForm');
    }
  });
}

const getEditorVal = (value)=>{
  state.getHtml = value;
}

onMounted(()=>{
    contractId.value = localGet('contractId');
    getHtml(contractId.value);
});
</script>

<style lang="scss" scoped>
.container{
  .button-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
